<template>
  <div>
    <!-- 查询 -->
    <a-row>
      <a-col :span="6">
        <a-form-item label="帖子标题" :wrapper-col="{ span: 16 }" name="name">
          <a-input
            v-model:value="queryData.postTitle"
            placeholder="请输入帖子标题"
          />
        </a-form-item>
      </a-col>
      <!-- <a-col :span="6">
        <a-form-item
          label="用户名称"
          :wrapper-col="{ span: 16 }"
          name="userName"
        >
          <a-input v-model:value="queryData.name" placeholder="用户名称" />
        </a-form-item>
      </a-col> -->
      <a-col :span="6">
        <a-form-item label="帖子状态" :wrapper-col="{ span: 16 }" name="type">
          <a-select
            placeholder="请选择帖子状态"
            ref="select"
            v-model:value="queryData.postStatus"
          >
            <a-select-option :value="1">待审核</a-select-option>
            <a-select-option :value="2">审核通过</a-select-option>
            <a-select-option :value="3">审核不通过</a-select-option>
            <a-select-option :value="4">已回收</a-select-option>
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6"></a-col>
      <a-col :span="6">
        <a-button @click="reset" style="margin-left: 20px">重置</a-button>
        <a-button
          @click="queryList"
          style="margin: 0 20px; background-color: #6a2c70"
          type="primary"
          >查询</a-button
        >
        <a-button
          @click="openDrawer(0)"
          type="primary"
          style="background-color: #b83b5e"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          新增帖子</a-button
        >
      </a-col>
    </a-row>

    <a-table
      tableLayout="fixed"
      :columns="columns"
      :data-source="postList.data"
      :loading="isloading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'postTitle'">
          <a-tooltip>
            <template #title> {{ record.forum?.postTitle }}</template>
            <div class="hidden">
              {{ record.forum?.postTitle }}
            </div>
          </a-tooltip>
        </template>
        <template v-if="column.key === 'like'">
          <a-switch
            @change="handleChange(record)"
            v-model:checked="record.like"
            checked-children="取消"
            un-checked-children="点赞"
          />
        </template>
        <template v-if="column.key === 'name'">
          {{ record.employee.name }}
        </template>
        <template v-if="column.key === 'communityName'">
          {{ record.community.communityName }}
        </template>
        <template v-if="column.key === 'postStatus'">
          <a-tag color="blue" v-if="record.forum.postStatus == 1">待审核</a-tag>
          <a-tag color="red" v-else-if="record.forum.postStatus == 3"
            >审核不通过</a-tag
          >
          <a-tag color="green" v-else-if="record.forum.postStatus == 2"
            >审核通过</a-tag
          >
          <a-tag color="pink" v-else-if="record.forum.postStatus == 4"
            >已回收</a-tag
          >
        </template>
        <template v-if="column.key === 'createTime'">
          {{ stringSlicing(record.forum.createTime) }}
        </template>
        <template v-if="column.key === 'action'">
          <a-button
            v-if="record.forum.postStatus == 2"
            type="primary"
            @click="remark(record.forum.postId)"
            style="margin-right: 20px"
            >评论</a-button
          >
          <a-button
            type="primary"
            @click="openDrawer(record.forum.postId)"
            style="margin-right: 20px; background-color: #f5b017"
            >详情</a-button
          >
          <a-popconfirm
            title="确认删除此帖子吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="deletePost(record)"
          >
            <a-button type="primary" style="background-color: #f38181" danger
              >删除</a-button
            >
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <!-- 抽屉 -->
    <a-drawer
      v-model:open="open"
      class="custom-class"
      root-class-name="root-class-name"
      :title="drawerTitle"
      placement="right"
      width="60%"
      :maskClosable="false"
    >
      <ForumDrawer v-if="open" :postId="postId" @receiveData="receiveData" />
    </a-drawer>

    <!-- 弹框 -->
    <a-modal v-model:open="modelOpen" title="评论" @ok="handleOk">
      <a-input v-model:value="commentValue" placeholder="请输入评论" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { userUserStore } from '@/stores/UserStore'
import { message } from 'ant-design-vue'
import { columns } from './columns'
import { PaginationModel } from '@/api/config/Model'
import { PlusOutlined } from '@ant-design/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import ForumDrawer from './ForumDrawer.vue'
import { deleteOssImage } from '@/api/config/api'
import {
  apiGetForumList,
  apiAddCriticize,
  apiDropLike,
  apiDeletePost,
} from '@/api/Forum/api'
const postList = reactive({
  data: [],
})
const store = userUserStore()
const userInfo: any = ref({})
const postId = ref<number | null>(null)
const open = ref<boolean>(false)
const pagination = ref<PaginationModel>({
  current: 1,
  total: 100,
  pageSize: 10, //每页中显示10条数据
  pageSizeOptions: ['10', '20', '30'],
})

const commentValue = ref('')
const modelOpen = ref(false)

const drawerTitle = ref<string>('新增帖子')
const isloading = ref<boolean>(false)
const openDrawer = (id: number) => {
  open.value = true
  postId.value = id
  if (id == 0) {
    drawerTitle.value = '新增帖子'
  } else {
    drawerTitle.value = '帖子详情'
  }
}

const queryList = () => {
  getForumList()
}

const handleChange = async (item: any) => {
  if (item.forum.postStatus != 2) {
    item.like = false
    return message.error('当前帖子不允许点赞')
  }
  try {
    await apiDropLike({
      isLike: item.like,
      postId: item.forum.postId,
      userId: userInfo.value.empId,
      Type: 1,
    })
    message.success('操作成功')
  } catch (error) {
    message.error('操作失败')
  }
  getForumList()
}

const remarkPostId = ref<null | number>(null)

const remark = (postId: number) => {
  remarkPostId.value = postId
  commentValue.value = ''
  modelOpen.value = true
}

//接受抽屉传递过来的数据
const receiveData = (type: number) => {
  if (type == 1) {
    message.success('修改成功')
  } else if (type == 3) {
    message.success('添加成功')
  } else if (type == 2) {
    message.error('修改失败')
  } else {
    message.error('添加失败')
  }

  postId.value = 0
  open.value = false
  getForumList()
}

// 提交评论
const handleOk = async () => {
  //
  try {
    let res = await apiAddCriticize({
      postId: remarkPostId.value,
      userId: userInfo.value.empId,
      criticizeContent: commentValue.value,
    })
    message.success(res.data)
  } catch (error) {
    message.error('评论失败')
  }
  modelOpen.value = false
  remarkPostId.value = null
}

const queryData = reactive<any>({
  postTitle: null,
  postStatus: null,
  userId: null,
  page: 1,
  pageSize: 10,
})

// 分页改变
const handleTableChange = (page: any) => {
  pagination.value.current = page.current
  pagination.value.pageSize = page.pageSize
  queryData.page = page.current
  queryData.pageSize = page.pageSize
  getForumList()
}

const reset = () => {
  Object.keys(queryData).forEach((key) => delete queryData[key])
  queryData.page = 1
  queryData.pageSize = 10
  queryData.userId = userInfo.value.empId
  getForumList()
}
// 删除帖子
const deletePost = async (item: any) => {
  try {
    //删除帖子之前删除帖子的图片
    if (item.forum.images != '') {
      item.forum.images = JSON.parse(item.forum.images)
      item.forum.images.forEach((ele: any) => {
        deleteOssImage({
          file: ele,
        })
      })
    }
    await apiDeletePost(item.forum.postId)
    message.success('删除成功')
  } catch (error) {
    message.error('删除失败')
  }
  getForumList()
}

//获取帖子列表
const getForumList = async () => {
  isloading.value = true
  try {
    let res = await apiGetForumList(queryData)
    postList.data = res.data.records
    pagination.value.current = res.data.current
    pagination.value.pageSize = res.data.size
    pagination.value.total = res.data.total
  } catch (error) {
    message.error('获取列表失败!')
  }
  isloading.value = false
}

const stringSlicing = (str: string) => {
  return str.split('T')[0] + ' ' + str.split('T')[1]
}

onMounted(() => {
  userInfo.value = store.employeeInfo
  queryData.userId = userInfo.value.empId
  getForumList()
})
</script>

<style lang="less" scoped></style>
